<template>
  <top-nav></top-nav>
  <div class="upload-body">
    <a-layout>
      <a-layout-sider width="50%">
        <div class="top-part">
          <a-upload-dragger
            v-model:file-list="fileList"
            :multiple="true"
            :before-upload="beforeUpload"
            :customRequest="customRequest"  
            @change="handleChange"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              点击或拖拽文件至此处上传
            </p>
            <p class="ant-upload-hint">
              支持单次和批量上传
            </p>
          </a-upload-dragger>
        </div>
      </a-layout-sider>
      <a-layout-content>
        <div class="bottom-part">
            <div class="upload-input">
              <a-input v-model:value="filePath" placeholder="文件路径" />
            </div>
            <div class="upload-input">
              <a-input v-model:value="fileDesc" placeholder="文件概述" />
            </div>
            <div class="upload-tags">
              文件标签：
              <template v-for="(tag) in tags" :key="tag">
                <a-tooltip v-if="tag.length > 20" :title="tag">
                  <a-tag :closable="true" @close="handleClose(tag)" color="purple">
                    {{ `${tag.slice(0, 20)}...` }}
                  </a-tag>
                </a-tooltip>
                <a-tag v-else :closable="true" @close="handleClose(tag)" color="purple">
                  {{ tag }}
                </a-tag>
              </template>
              <a-input
                v-if="inputVisible"
                ref="inputRef"
                v-model:value="inputValue"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                @blur="handleInputConfirm"
                @keyup.enter="handleInputConfirm"
              />
              <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
                <plus-outlined />
                New Tag
              </a-tag>
            </div>
            <div class="upload-button">
              <a-button type="primary" block @click="submitUpload">上传</a-button>
            </div>
        </div>
      </a-layout-content>
    </a-layout>
 
  </div>
</template>

<script>
import topNav from '@/components/top-nav.vue'
import { ref, reactive, toRefs, nextTick } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { upload } from '@/api/index'

export default {
  components:{
      topNav,
      PlusOutlined,
  },
  setup() {
    const fileList = ref([]);
    const uploading = ref(false);
    const inputRef = ref()
    const state = reactive({
      tags: [],
      inputVisible: false,
      inputValue: '',
    });
    const beforeUpload = file => {
      fileList.value = [...fileList.value, file];
      return false;
    };
    const handleUpload = () => {
      uploading.value = true;
    };
    const handleClose = removedTag => {
      const tags = state.tags.filter(tag => tag !== removedTag)
      console.log(tags);
      state.tags = tags;
    };
    const showInput = () => {
      state.inputVisible = true
      nextTick(() => {
        inputRef.value.focus()
      });
    };
    const handleInputConfirm = () => {
      const inputValue = state.inputValue;
      let tags = state.tags;
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue]
      }
      console.log(tags);
      Object.assign(state, {
        tags,
        inputVisible: false,
        inputValue: '',
      })
    };
    const { tags } = toRefs(state)
    return {
      ...toRefs(state),
      handleClose,
      showInput,
      handleInputConfirm,
      inputRef,
      beforeUpload,
      handleUpload,
      fileList,
      tags
    };
  },

  data(){
    return{
      filePath: '',
      fileDesc: '',
    }
  },
  methods: {
    handleChange(info) {
      const status = info.file.status;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully.`)
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    submitUpload(){
      console.log('')
      if(!this.fileDesc || !this.fileDesc) {
        message.error('文本路径、文本描述必须填写')
        return
      }
      if(this.fileList.length <= 0) {
        message.error('请上传文件')
        return
      }
      const formData = new FormData()
      this.fileList.forEach(file => {
        formData.append('files', file.originFileObj)
      })
      formData.append('filePath', this.filePath)
      formData.append('fileDesc', this.fileDesc)
      if(this.tags.length > 0) {
        this.tags.forEach(value => {
          formData.append('tags', value)
        })
      }
      upload(formData).then(result => {
        message.success('上传成功')
      }).catch(error => {
        console.log(error)
        message.error('上传失败')
      })
    },
    customRequest(data) {
      console.log(data)
    }
  }
}
</script>